/**
 * @copyright   2010-2017, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@include export("flex") {
    $titon-flex-class-region: map-get($titon-flex, "class-region");
    $titon-flex-class-block: map-get($titon-flex, "class-block");
    $titon-flex-grid-gutter: map-get($titon-flex, "grid-gutter");
    $titon-flex-width: map-get($titon-flex, "width");
    $titon-flex-sizes: (
        "xs": (6, breakpoint-setting("xs", 1), breakpoint-setting("xs", 2)),
        "sm": (12, breakpoint-setting("sm", 1), breakpoint-setting("sm", 2)),
        "md": (12, breakpoint-setting("md", 1), breakpoint-setting("md", 2)),
        "lg": (12, breakpoint-setting("lg", 1), null), // Leave open ended
    );

    #{generate-class-name($titon-flex, $titon-flex-class-region)} {
        @include flex-region($titon-flex-width);

        // Alignment
        &.flow-top,
        &.flow-left { @include flex-region-align(left); }
        &.flow-bottom,
        &.flow-right { @include flex-region-align(right); }
        &.flow-center { @include flex-region-align(center); }
        &.flow-between { @include flex-region-align(between); }
        &.flow-around { @include flex-region-align(around); }

        // Support RTL
        @if (setting("text-direction") == rtl) {
            writing-mode: vertical-rl;
        }
    }

    #{generate-class-name($titon-flex, $titon-flex-class-block)} {
        @include flex-block;
        @include flex-block-order;

        // Override parent alignment
        &.self-top,
        &.self-left { @include flex-block-align(top); }
        &.self-bottom,
        &.self-right { @include flex-block-align(bottom); }
        &.self-center { @include flex-block-align(center); }
        &.self-baseline { @include flex-block-align(baseline); }
        &.self-stretch { @include flex-block-align(stretch); }
    }

    // Responsive sizes
    @each $size, $options in $titon-flex-sizes {
        $size-columns: nth($options, 1);

        @include in-range( (nth($options, 2), nth($options, 3)) ) {
            @for $i from 1 through $size-columns {
                #{generate-class-name($titon-flex, $titon-flex-class-block)}.#{$size}-#{$i} {
                    flex-basis: flex-span($i, $size-columns, $titon-flex-width, map-get($titon-flex, "gutter"));
                }
            }
        }
    }

    //-------------------- Modifiers --------------------//

    // Generate a grid of blocks with equal spacing between
    @if (is-feature-enabled("all-modifiers") or index($titon-flex-modifiers, "grid")) {
        #{generate-class-name($titon-flex, $titon-flex-class-region, "grid")} {
            flex-flow: row wrap;
            justify-content: flex-start;
            align-content: flex-start;
            max-width: none;

            @if $titon-flex-grid-gutter {
                margin-top: -$titon-flex-grid-gutter;
                margin-left: -$titon-flex-grid-gutter;

                > #{generate-class-name($titon-flex, $titon-flex-class-block)} {
                    margin-top: $titon-flex-grid-gutter;
                    margin-left: $titon-flex-grid-gutter;
                }
            }
        }
    }

    // Display blocks vertically or horizontally regardless of orientation
    @if (is-feature-enabled("all-modifiers") or index($titon-flex-modifiers, "horizontal")) {
        #{generate-class-name($titon-flex, $titon-flex-class-region, "horizontal")} {
            @include flex-region-orientation(horizontal);
        }
    }

    @if (is-feature-enabled("all-modifiers") or index($titon-flex-modifiers, "vertical")) {
        #{generate-class-name($titon-flex, $titon-flex-class-region, "vertical")} {
            @include flex-region-orientation(vertical);
        }
    }

    // Wrap blocks onto the next line instead of trying to squish into 1 line
    @if (is-feature-enabled("all-modifiers") or index($titon-flex-modifiers, "wrap")) {
        #{generate-class-name($titon-flex, $titon-flex-class-region, "wrap")} {
            @include flex-region-wrap;
        }
    }
}
